<template>
  <!-- 选择课题名称 -->
  <div>
    <a-button
      type="primary"
      class="ml12"
      icon="pushpin"
      :loading="requestLoading"
      :disabled="!form.projectId"
      @click="handleOpen()"
      >选择</a-button
    >
    <DialogForm :customFooter="true" ref="dialogForm" headerTitle="选择课题信息" :visible.sync="visible" :width="1200">
      <template slot="formHeader">
        <!-- 搜索 -->
        <searchData ref="searchData" :searchData="searchArr" @search="handleOpen"></searchData>
        <!-- 表格 -->
        <a-table
          rowKey="id"
          :loading="requestLoading"
          :row-selection="{ type: 'radio', selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
        ></a-table>
      </template>
      <template slot="footer">
        <a-button
          type="primary"
          @click="
            $refs.searchData.form.resetFields()
            visible = false
          "
          class="button_right"
        >
          关闭
        </a-button>
        <a-button type="primary" :disabled="!selectedRowKeys || !selectedRowKeys.length" @click="handleConfirm">
          确认选择
        </a-button>
      </template>
    </DialogForm>
  </div>
</template>

<script>
import { qcActivityTopicRegister } from '@/api/quality/quality' // api
import DialogForm from '@/components/DialogForm' // 弹窗
import Selector from '@/components/Select/Selector' // 选择器

export default {
  name: 'ChooseQCActivityRegistration',
  components: {
    DialogForm
  },
  data() {
    return {
      visible: false, // 信息弹窗显隐控件
      selectedRowKeys: [], // 信息选中id集合
      selectedRow: [], // 信息选中对象集合
      dataSource: [], // 信息列表
      searchArr: [
        // 搜索框
        {
          name: '课题名称',
          type: 'input',
          value: 'topicName'
        },
        {
          name: '课题注册号',
          type: 'input',
          value: 'topicRegisterNumber'
        },
        {
          name: '课题类型',
          type: Selector,
          selectType: '47',
          valueKey: 'topicTypeId'
        }
      ],
      columns: [
        {
          title: '课题注册号',
          align: 'center',
          width: 200,
          dataIndex: 'topicRegisterNumber'
        },
        {
          title: '课题名称',
          dataIndex: 'topicName'
        },
        {
          title: '课题类型',
          dataIndex: 'topicType.name'
        }
      ], // 试验计划表头
      requestLoading: false // 关联名称loading
    }
  },
  props: {
    // 表单
    form: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    /**
     * @description: 样板信息复选项改变
     * @param {*} selectedRowKeys：选中项
     */
    onSelectChange(selectedRowKeys, selectedRow) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRow = selectedRow
    },
    /**
     * @description: 关联样板信息后回调
     */
    handleConfirm() {
      this.$set(this.form, 'registerId', this.selectedRow?.[0]?.id)
      const formNames = [
        'topicName',
        'topicTypeName',
        'topicGroupCreationTime',
        'trainTime',
        'guidanceTypeName',
        'dutyName',
        'topicRegisterNumber'
      ]
      formNames.forEach((i) => {
        this.$set(this.form, i, this.selectedRow?.[0]?.[i])
      })
      this.$set(this.form, 'departmentName', '技术质量部')
      // 重置搜索表单
      this.$refs.searchData?.form.resetFields()
      this.visible = false
    },
    /**
     * @description: 打开选择试验项目弹窗
     */
    handleOpen(e = {}) {
      this.requestLoading = true
      const { projectId } = this.form
      qcActivityTopicRegister
        .getToptic({
          ...e,
          projectId
        })
        .then((res) => {
          this.requestLoading = false
          this.dataSource = res.data || []
          if (res.code === 200 && res.data?.length) {
            this.form.registerId && (this.selectedRowKeys = [this.form.registerId])
            if (!this.visible) {
              this.visible = true
            }
          } else {
            this.$message.warning('该项目没有课题信息可以选择！')
          }
        })
        .catch(() => {
          this.requestLoading = false
        })
    }
  }
}
</script>